<template>
    <div class="red-default">

        <!--S红包封面，门-->
        <red-door
                v-if="red_door_show"
                :red-id="1"
                :red="red"
                :under="under"
                @changeUnder="changeUnder"
                @success="success"
        >
        </red-door>
        <!--E红包封面，门-->

        <!--S红包码-->
        <control :red="red">
        </control>
        <!--E红包码-->


        <!--S成功开启红包-->
        <open-success
                v-if="under === 'success'"
                :red="red"
        >
        </open-success>
        <!--E成功开启红包-->

    </div>
</template>

<script>
import RedDoor from "./components/red-door"
import Control from "./components/control"
import OpenSuccess from "./components/open-success"
export default {
    name: "red-default",
    data () {
      return {
          // 开红包状态 not=未开 opening=开启中 remoting=服务器远程请求中 success=开启结束并且成功 error=开启结束并且开启出错
          under: "not",
          // 红包封面组件显示状态
          red_door_show: true
      }
    },
    components: {
        RedDoor,
        Control,
        OpenSuccess
    },
    props: {
      red: {
          type: Object
      }
    },
    mounted() {
        this.under = this.red.under
        if(this.under === 'success'){
            this.red_door_show = false
        }
    },
    methods: {
        /**
         * 红包状态更改
         */
        changeUnder(under) {
            this.under = under
            if(under === 'success') {
                setTimeout(() => {
                    this.red_door_show = false
                },2000)
            }
        },
        /**
         * 成功打开了红包
         */
        success(res) {
            console.log(res)
        }
    }
}
</script>

<style scoped lang="less" src="./red-default.less"></style>

